<template>
  <div class="login">
     <h2 class="title"> <i class="el-icon-platform-eleme"></i> 登录</h2>
    <el-form 
       ref="form" 
       :model="form" 
       label-width="60px" 
       class="from"
       :rules="rules"
    >
       <el-form-item label="账号" prop="username">
         <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input v-model="form.password" type="password" prefix-icon="el-icon-lock"></el-input>
       </el-form-item>
     
       <el-form-item>
         <el-button type="primary" @click="onSubmit">登录</el-button>
         <el-button @click="returnBtn">重置</el-button>
       </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { userLoginAPI } from "../apis/user";
import { setToken, setUserId } from "../utils/localData";
export default {
   data () {
     return {
       form: {
          username: "123123",
          password: "123",
        },
        rules: {
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { pattern:/^1\d{10}$|^\d{5,6}$/, message: '请输入正确手机号码', trigger: 'blur' }
          ],
          passwoed:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
          ],
        }
     }
   },
   methods: {
     // 点击登录按钮
     onSubmit() {
      // console.log("点击了按钮");
      
      this.$refs.form.validate(async(valid) => {
        console.log(valid);
          if (valid) {
            // 发送请求
            // console.log(this.form)
            const res = await userLoginAPI(this.form);
            console.log(res);
                  // 情况1：登录成功
            if (res.data.message === "登录成功") {
              // 保存 token 和 id
              setToken(res.data.data.token);
              setUserId(res.data.data.user.id);
              // 成功提示
              this.$message({ message: "恭喜你，登录成功", type: "success" });
              // 跳转到项目首页
              this.$router.push({path: "/home"})
            } else {
              // 情况2：登录失败提示
              this.$message({ message: "用户名或密码错误", type: "error" });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
            
    },
    // 点击重置按钮
    returnBtn(){
      this.$refs.form.resetFields();
    }
   }
}
</script>

<style lang="less" scoped>
.login{
  // 1vw    视口宽度(viewport width)的 1%
  // 1vh    视口高度(viewport height)的 1%
  background-color: #f2f2f2;
  height:100vh;
  padding-top: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  .title{
    font-size:30px;
    margin: 20px;
    .el-icon-platform-eleme{
      color: rgb(58, 45, 236)
    }
  }
  .from{
    width:400px;
    background-color: rgb(215, 250, 250);
    padding:30px;
    border-radius:10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }
}
</style>